<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="include :: head">page head</head>

<style>
	.form-group label {
		color: #ffffff;
	}
</style>

<body class="text-center">

<div class="container d-flex h-100 p-3 mx-auto flex-column">
	<div th:replace="include :: top">header goes here.</div>
	
	<main role="main" class="inner cover" id="app">
		<div class="alert alert-success text-left" role="alert" v-show="show">
			Success! Message CID: {{cid}}
		</div>
		
		<form class="text-left" id="transfer-form">
			<div class="form-group">
				<label>付款地址</label>
				<input type="text" name="from" v-model="from" class="form-control" placeholder="付款地址" readonly>
			</div>
			
			<div class="form-group">
				<label>收款地址</label>
				<input type="text" name="to" v-model="to" class="form-control" placeholder="收款地址">
			</div>
			<div class="form-group">
				<label>转账金额</label>
				<input type="number" step="0.1" name="value" v-model="value" class="form-control"
				       placeholder="转账金额">
			</div>
			<div class="form-group">
				<label>Gas Price</label>
				<input type="number" step="0.01" name="gasPrice" v-model="gasPrice" class="form-control"
				       placeholder="Gas Price">
			</div>
			
			<div class="form-group">
				<label>Gas Limit</label>
				<input type="number" step="100" name="gasLimit" v-model="gasLimit" class="form-control"
				       placeholder="Gas Limit">
			</div>
			
			<button type="button" v-on:click="submit" style="padding: 0.55rem 1.25rem;"
			        class="mt-4 btn btn-primary btn-block">发送交易</button>
		</form>
	
	</main>
	
	<div th:replace="include :: footer">footer goes here.</div>
</div>

<script>
	$(document).ready(function () {
		var address = localStorage.getItem('address');
		if (address.length < 20) {
			JDialog.alert({title: '操作提示', content: '请先导入钱包', closeBtn: false, dragable: false, offset: 150,
				callback: function () {
				location.href = "/wallet/import";
			}});
		}
	})
	new Vue({
		el: "#app",
		data: {
			from: localStorage.getItem("address"),
			to: "",
			gasPrice: 0.001,
			gasLimit: 300,
			value: "0 FIL",
			cid: "",
			show: false,
		},
		methods: {
			// 发送转账交易
			submit: function () {
				var that = this;
				if (this.to.trim() == '') {
					return messageError("收款地址不能为空.");
				}
				if (this.value <= 0) {
					return messageError("请输入转账金额.");
				}
				if (this.gasPrice <= 0) {
					return messageError("请输入合法的 GasPrice.");
				}
				if (this.gasLimit <= 0) {
					return messageError("请输入合法的 GasLimit.");
				}
				var loading = messageLoading();
				setTimeout(function () {
					httpPost("/api/filecoin/transaction/send", getFormData("transfer-form"), function (res) {
						
						var data = res.data;
						loading.hide();
						that.cid = data;
						that.show = true;
						messageOk("交易发送成功.");

						that.to = "";
						that.value = 0;
						
					}, function (message) {
						messageError(message);
						loading.hide();
					});
				}, 500);
				
			}
		}
	});
</script>
</body>
</html>